<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/admin/common::common_head">
    <title>Title</title>
</head>
<style>
    .data-row {
        padding: 5px 0;
    }
</style>
<body class="cm-no-transition cm-1-navbar">
<!--后台公共侧边栏（菜单）-->
<div th:replace="common/admin/common::common_siderbar"></div>
<!--后台公共顶部-->
<div th:replace="common/admin/common::common_top"></div>
<div id="global">
    <div class="container-fluid">
        <div class="row cm-fix-height">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h4>用户列表</h4>
                        <table class="table table-bordered table-hover" id="data-show-table">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>手机号</th>
                                <th>Email</th>
                                <th>余额</th>
                                <th>积分</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <div>
                            <nav class="pull-right" style="display: inline-block">
                                <ul class="pagination shadowed" style="margin:0">
                                    <li class="prev" th:classappend="(${pager.currPage} eq 1 ? 'disabled')">
                                        <a href="javascript:">
                                            <span><i class="fa fa-angle-left"></i></span>
                                        </a>
                                    </li>
                                    <li th:class="(${pager.currPage} eq ${i} ? 'active')" th:each="i : ${#numbers.sequence(1,pager.totalPage)}">
                                        <a href="javascript:" th:text="${i}">1</a>
                                    </li>
                                    <li class="next" th:classappend="(${pager.currPage} eq ${pager.totalPage} ? 'disabled')">
                                        <a href="javascript:">
                                            <span><i class="fa fa-angle-right"></i></span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <span style="clear: both"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
        <div aria-hidden="true" class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">
                        用户详细
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="hint"></div>
                    <div id="data-show">
                        <div class="row data-row">
                            <div class="col-xs-3 text-center">用户名：</div>
                            <div class="col-xs-9" id="name_text_box">用户名</div>
                        </div>
                        <div class="row data-row">
                            <div class="col-xs-3 text-center">手机号码：</div>
                            <div class="col-xs-9" id="phone_text_box">0.0</div>
                        </div>
                        <div class="row data-row">
                            <div class="col-xs-3 text-center">性别：</div>
                            <div class="col-xs-9" id="sex_text_box">0.0</div>
                        </div>
                        <div class="row data-row">
                            <div class="col-xs-3 text-center">生日：</div>
                            <div class="col-xs-9" id="birthday_text_box">0.0</div>
                        </div>
                        <div class="row data-row">
                            <div class="col-xs-3 text-center">Email：</div>
                            <div class="col-xs-9" id="email_text_box">0.0</div>
                        </div>
                        <div class="row data-row">
                            <div class="col-xs-3 text-center">余额：</div>
                            <div class="col-xs-9" id="banlance_text_box">0.0</div>
                        </div>
                        <div class="row data-row">
                            <div class="col-xs-3 text-center">积分：</div>
                            <div class="col-xs-9" id="integral_text_box">0.0</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                    <button class="btn btn-primary" id="submitBtn" type="button">确定</button>
                </div>
            </div>
        </div>
    </div>

    <footer th:replace="common/admin/common::common_footer"></footer>
</div>

<script th:replace="common/admin/common::common_footer_script"></script>
<script th:src="@{/admin/assets/layer/layer.js}" type="text/javascript"></script>
<script th:src="@{/admin/assets/js/currencyFormatter.min.js}" type="text/javascript"></script>
<script type="text/javascript">
    document.title = '亿人宝 - 用户列表';
    // 总页码
    const iTotalPage = [[${pager.totalPage}]];
    const get_action = 'get';
    // 格式化货币的参数
    let parameters = {
        currency: 'CNY',
        symbol: '￥',
        locale: 'zh',
        decimal: '.',
        group: ',',
        pattern: '! #,##0.00'
    };

    // layer的loading层
    function load() {
        return layer.load(0, {
            offset: ['50%', '50%']
        });
    }

    // 将对象数据显示
    function showObjectData(modal, o) {
        // 数据展示
        $('#name_text_box').text(o.name);
        $('#phone_text_box').text(o.phone);
        $('#sex_text_box').text(o.sex);
        $('#birthday_text_box').text(o.birthday);
        $('#email_text_box').text(o.email);
        $('#balance_text_box').text(o.balance);
        $('#integral_text_box').text(o.integral);
    }

    /**
     * 传入list，得到html字符串
     * @param list
     */
    function splitListForTableString(list) {
        function createTd(tdContent) {
            return "<td>" + (null == tdContent ? "" : tdContent) + "</td>";
        }

        let str = "";

        let curr = null;
        for (let i = 0; i < list.length; i++) {
            curr = list[i];
            str += "<tr>";
            str += createTd(curr.id);
            str += createTd(curr.name);
            str += createTd(curr.phone);
            str += createTd(curr.email);
            str += createTd(OSREC.CurrencyFormatter.format(curr.balance, parameters));
            str += createTd(curr.integral);
            str += "<td>";
            str += '<div class="btn-group" role="group">';
            str += '<button class="btn btn-info get-action" data-id="' + curr.id + '" title="查看" type="button">';
            str += '<i class="fa fa-fw fa-search-plus"></i>';
            str += '</button>';
            str += '<button class="btn btn-danger remove-action" data-id="' + curr.id + '" data-name="' + curr.name + '" title="删除" type="button">';
            str += '<i class="fa fa-fw fa-trash-o"></i>';
            str += '</button>';
            str += '</div>';
            str += "</td>";
            str += "</tr>";
        }

        return str;
    }

    // 根据当前动作显示模态框
    function open_modal(_modal, action, obj) {
        let loadIndex = load();
        // 当前模态框
        let $cache_element = _modal;

        if (get_action === action) {// 查看操作
            $cache_element.find('#myModalLabel').text('用户【' + obj.name + '】的详细信息');

            $cache_element.find('#data-show').show();
            $cache_element.find('#hint').hide();
            $cache_element.find('.modal-footer').hide();

            showObjectData($cache_element.find('#data-show'), obj);
        }

        layer.close(loadIndex);
        $cache_element.modal('show');
    }

    // 刷新数据
    function refreshData(param) {
        param.pageSize = [[${pager.pageSize}]];
        let loadIndex = load();
        $.getJSON('[[@{/admin/user/listJson}]]', param, function (data) {
            let $dataShowTable = $('#data-show-table');

            if (undefined !== data && data.status === 200) {
                let list = data.obj;

                let $tbody = $dataShowTable.find('tbody');
                $tbody.html(splitListForTableString(list));

                $('.get-action').tooltip();
                $('.remove-action').tooltip();
            }
            layer.close(loadIndex);
        })
    }

    /**
     * 当页码被选中后，切换上一页，下一页的禁用效果
     * @param pageNum 将要被选中的页码
     */
    function checkPageNumber(pageNum) {
        let $prev = $('.pagination li.prev');
        let $next = $('.pagination li.next');
        $prev.removeClass('disabled');
        $next.removeClass('disabled');

        if (pageNum <= 1) {
            $prev.addClass('disabled');
        } else {
            $prev.removeClass('disabled');
        }
        if (pageNum >= iTotalPage) {
            $next.addClass('disabled');
        } else {
            $next.removeClass('disabled');
        }
    }

    $(function () {
        let $pagination = $('.pagination');
        refreshData({});

        // 上下页更换数据
        $pagination.on('click', 'li.prev', function (event) {
            let $this = $(this);
            let iCurrPage = parseInt($this.siblings('.active').text());

            // 刷新数据
            if (1 !== iCurrPage) {
                // 将要选中的页码
                let iFutureSelectPageNumber = iCurrPage - 1;

                let $aPageLis = $('.pagination li:not(.next,.prev)');
                $aPageLis.removeClass('active');// 移除所有页码的选中状态
                // 使将要选中的页码选中
                $aPageLis.eq(iFutureSelectPageNumber - 1).addClass('active');

                // 选中页后的操作
                checkPageNumber(iFutureSelectPageNumber);

                // 刷新数据
                refreshData({currPage: iFutureSelectPageNumber});
            } else {
                $this.addClass('disabled');
                layer.msg('已经在最首页啦，^-^!', {time: 1000})
            }
        });
        $pagination.on('click', 'li.next', function (event) {
            let $this = $(this);
            let iCurrPage = parseInt($this.siblings('.active').text());

            if (iTotalPage !== iCurrPage) {
                // 将要选中的页码
                let iFutureSelectPageNumber = iCurrPage + 1;

                let $aPageLis = $('.pagination li:not(.next,.prev)');
                $aPageLis.removeClass('active');// 移除所有页码的选中状态
                // 使将要选中的页码选中
                $aPageLis.eq(iFutureSelectPageNumber - 1).addClass('active');

                // 选中页后的操作
                checkPageNumber(iFutureSelectPageNumber);

                // 刷新数据
                refreshData({currPage: iFutureSelectPageNumber});
            } else {
                $this.addClass('disabled');
                layer.msg('已经在最尾页啦，^-^!', {time: 1000})
            }
        });
        // 页码更换数据
        $pagination.on('click', 'li:not(.next,.prev,.active)', function (event) {
            let $this = $(this);
            let iPageNum = parseInt($this.text());// 点击后将要跳转的页码

            // 使当前点击页码选中
            $this.siblings('.active').removeClass('active');
            $this.addClass('active');

            // 选中页后的操作
            checkPageNumber(iPageNum);

            // 刷新数据
            refreshData({currPage: iPageNum});
        });

        let $document = $(document);
        // 查看对象信息
        $document.on('click', '.get-action', function () {
            let loadIndex = load();
            let id = $(this).attr('data-id');
            $.getJSON('[[@{/admin/user/}]]' + id, {}, function (data) {
                if (data.status === 200 && undefined !== data.obj) {
                    open_modal($('#myModal'), 'get', data.obj);
                }
                layer.close(loadIndex);
            });
        });
        // 删除对象信息
        $document.on('click', '.remove-action', function () {
            let $this = $(this);
            let id = $this.attr('data-id');
            let name = $this.attr('data-name');

            let $myModal = $('#myModal');
            $myModal.find('#hint').text('确定要删除该用户【' + name + '】吗？');
            $myModal.find('#myModalLabel').text('确认删除？');

            $myModal.find('#data-show').hide();
            $myModal.find('#hint').show();
            $myModal.find('.modal-footer').show();
            $myModal.modal('show');

            $('#submitBtn')[0].onclick = function () {
                let loadIndex = layer.load();
                $.post('[[@{/admin/user/remove/}]]' + id, {}, function (data) {
                    layer.close(loadIndex);

                    if (data.status === 200 && data.obj) {
                        $this.parents('tr').remove();
                        layer.msg(data.msg, {time: 1000}, function (i) {
                            location.reload();
                        })
                    }
                });
            };
        });
    });
</script>
</body>
</html>